import { createApp } from 'vue'
import Cookies from 'js-cookie'


import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import locale from 'element-plus/es/locale/lang/zh-cn'

import '@/assets/styles/index.scss' // global css
import 'virtual:uno.css'
import hljs from 'highlight.js'
import vueHighlightjs from 'vue3-highlightjs'// 根据你的路径调整

import App from './App.vue'
import store from './store/index.js'
//如果路径指向一个目录（如./router），则会查找该目录下的index文件（如index.js）
import router from './router/index.js'


//权限控制：例如，根据用户的权限决定是否显示某个按钮或元素。 v-hasPermi
//输入框自动聚焦：在页面加载时，自动将焦点设置到某个输入框。
//防重复点击：防止表单重复提交。
//其他自定义DOM操作。
import addDirectiveForApp from './directive/index.ts' // directive

// 注册认证、消息框、页签等插件,已经改为VUE3的导入方式
//import plugins from './plugins/index.ts' // plugins
//app.use(plugins)




//路由守卫，每次请求API都会检查是否有rolekey如果没有则重新请求；或者刷新页面重新请求获取权限
import './router-guard' // permission control


//需要挂载的全局方法
import { useDict } from '@/utils/dict'
import { API_CONFIG } from "@/api/system/config.ts"
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi.ts'
import { download } from '@/utils/request.ts'


const app = createApp(App)

// 全局方法挂载
app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
app.config.globalProperties.resetForm = resetForm
app.config.globalProperties.handleTree = handleTree
app.config.globalProperties.addDateRange = addDateRange
app.config.globalProperties.getConfigKey = API_CONFIG.getConfigKey
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels








// 分页组件
import Pagination from '@/components/Pagination/index.vue'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar/index.vue'
// 富文本组件
import Editor from "@/components/Editor/index.vue"
// 文件上传组件
import FileUpload from "@/components/FileUpload/index.vue"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload/index.vue"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview/index.vue"
// 字典标签组件
import DictTag from '@/components/DictTag/index.vue'
// svg图标
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'



// 全局组件挂载
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)
app.component('svg-icon', SvgIcon)

app.use(router)
app.use(store)

// 使用插件，传入hljs
app.use(vueHighlightjs, hljs)


//图标加载，npm install element-plus@latest @element-plus/icons-vue@latest
//全局注册的组件可以在此应用的任意组件的模板中使用： 例如app.component('Editor', Editor) 可以在VUE文件中写<Editor/> 
//添加is-loading实现动画<el-icon class="is-loading"><Loading /></el-icon>

//如果使用:icon="XXX" 而不想写import 就需要参考https://element-plus.sxtxhy.com/zh-CN/component/icon.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95里面的自动导入
//当你使用冒号绑定（即 :icon="Plus"）时，你需要导入 Plus 图标组件（如：import { Plus } from '@element-plus/icons-vue'），然后将它传递给 icon 属性.这是因为冒号表示这是一个 JavaScript 表达式，所以 Plus 应该是一个变量。如果你没有导入 Plus，那么它将是未定义的，图标就不会显示。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}




//注册hasRole、hasPermi、copyText指令
addDirectiveForApp(app)

// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
  locale: locale,
  // 支持 large、default、small
  size: Cookies.get('size') || 'default'
})

app.mount('#app')